<template>
  <div class="charts">
    <div id="mychartspie" style="width: 600px; height: 400px"></div>
    <div id="mychartsbar" style="width: 600px; height: 400px"></div>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      scaleData: [], //饼状图数据
      scalelegent: [], //饼状图标注
      bararr: {}, //柱状图数据
      bardayarr: [], //柱状图时间轴(x轴)
      articlearr: [], //柱状图文章数量(y轴)
    }
  },
  mounted() {
    this.drawLine()
    this.drawpie()
  },
  methods: {
    drawLine() {
      //定义坐标数组
      let bardayarr = []
      let articlearr = []
      //图表初始化
      let mychartsbar = this.$echarts.init(
        document.getElementById('mychartsbar')
      )
      //axios获取数据
      this.$http.get('/dashboard/bar', { type: 'paper' }).then((res) => {
        if (res.result === '00000') {
          this.bararr = res.data
          for (let i = 0; i < this.bararr.length; i++) {}
        }
      })
      // 指定图表的配置项和数据
      mychartsbar.setOption({
        title: {
          text: 'EChats柱状图实例',
        },
        tooltip: {},
        legend: {
          data: ['销量'],
          orient: 'verticle',
          x: 'right',
          y: 'center',
        },
        xAxis: {
          data: ['衬衫', '短裤', '高跟鞋', '裤子'],
        },
        yAxis: {},
        series: [
          {
            // name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 20],
          },
        ],
      })
    },
    drawpie() {
      //获取数据
      let scaleData = []
      let scalelegent = []
      //绘制图表
      let mychartpie = this.$echarts.init(
        document.getElementById('mychartspie')
      )
      this.$http
        .get('/dashboard/pie', { type: this.selectedScale })
        .then((res) => {
          // console.log(res.result.data)
          this.scaleData = res.data
          scaleData = this.scaleData
          // console.log(scaleData)
          for (let i = 0; i < res.data.length; i++) {
            this.scalelegent[i] = res.data[i].name
          }
          scalelegent = this.scalelegent
          mychartpie.setOption({
            legend: {
              data: scalelegent,
            },
            series: [
              {
                radius: '50%',
                type: 'pie',
                lable: {
                  show: true,
                  position: 'outside',
                },
                data: scaleData,
              },
            ],
          })
        })
    },
  },
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.charts {
  margin: 100px;
  display: flex;
}
.mychartspie {
  border: 1px solid #000;
  justify-content: flex-end;
}
</style>
